import React, { Component, useContext, useState, useEffect, useRef } from 'react';
import { Table, Input, Form,Select,Button ,Space,Switch} from 'antd';
import TheButton from "@/components/TheButton";
import TheDialog from '@/components/TheDialog'

class Timeout extends Component {
  formRef = React.createRef()
  inputRef = React.createRef()
  state = {
    loading: false,
    dataSource: [],
    columns: [
      {
        title: '配置页',
        dataIndex: "page",
        key: "page",
        align: 'center',
        width: '30%',
      },
      {
        title: 'Type值',
        dataIndex: "type",
        key: "type",
        align: 'center',
        editable: true,
        render: (text, record) => {
          return <div>
            {record.type}
          </div>
        },
        width: '30%'
      },
      {
        title: '开关',
        dataIndex: "status",
        key: "status",
        align: 'center',
        editable: true,
        render: (text, record) => {
          return <div>
            <Switch defaultChecked={text} onChange={(e) => this.handleSave(e, record.id)} />
            {/* {record.status} */}
          </div>
        },
        width: '20%'
      },
      {
        title:"操作",
        align: 'center',
        width: '20%',
          render: (text, render) => {
            return (
              <div>
                <TheButton haspermi={['animation:list:del']} onClick={() => this.deleteAnimation(render.id)}>删除</TheButton>
              </div>
            );
          },
      }
    ],
    editIndex: null,
    editValue: '',
    visible:false,
    content:"",
    sort:"",
    status:0
  }

  async componentDidMount() {
    await this.getData()
  }

  getData = async () => {
    React.$post('/admin/decorationInfo/list').then(response => {
      if (response.code === 0) {
        this.setState({
          dataSource: response.data
        })
      }
    })
  }

  addDialog = () =>{
    this.setState({
      visible:true
    },()=>{
      console.log(this.state.visible);
    })
  }
  closeDialog = () =>{
    this.setState({
      visible:false
    })
  }
  addAnimation = async (val) => {
    console.log(val);
    const { content,sort,status } = this.state
    let page = val.page.trim()
    let type = val.type.trim()
    val = {page,type}
    let res = await React.$post("/admin/decorationInfo/add",{ content,sort,status, ...val })
    if(res.code === 0){
      React.$message({
        type: 'info',
        content: '新增成功'
      })
      this.closeDialog()
      this.getData()
    }
  }

  handleSave = async (row,data) => {
    let type = "关闭"
    let status = 0
    if(row){
      status = 1
      type = "开启"
    }
    // console.log(status,data);
    await React.$post('/admin/decorationInfo/edit', { status,id:data }).then(res => {
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: type+'成功'
        })
        // this.getData()
      }
    })
  }
  deleteAnimation = async (id) =>{
    await React.$post('/admin/decorationInfo/del', { id }).then(res => {
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '删除成功'
        })
        this.getData()
      }
    })
  }

  render() {
    const { loading, dataSource,visible,columns } = this.state
    return <div className={"p-layout-box configuration"}>
      <div style={{width:"120px",marginBottom:"10px"}}>
        <Button size='middle' type='primary' onClick={this.addDialog} >新增</Button>
      </div>
      <div className={'platform-set-list'}>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          loading={loading}
          pagination={false}
          {...this.props}
        />
      </div>
      <TheDialog
          visible={visible}
          title="新增动画效果"
          width={400}
          handleCancel={this.closeDialog}
          footer={null}
        >
          <Form onFinish={this.addAnimation}>
            <Form.Item label="配置页" name="page" rules={[{ required: true }]}>
              <Input placeholder='请输入配置页' />
            </Form.Item>
            <Form.Item label="Type值" name="type" rules={[{ required: true }]}>
              <Input placeholder='请输入Type值' />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.closeDialog}>取消</Button>
                  <Button type="primary" htmlType='submit'>确认</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
    </div>
  }
}

export default Timeout